// 建立了个Login组件

// 利用ElementUi搭建template部分的结构,增加style样式

// 表单输入验证功能
// 在data中添加一个对象,双向绑定,保存表单基本信息,同时给定初始值
// 为表单加上一些验证规则(这里用的是能验证的表单,在总项上用:rules绑定规则总名称,在每个子项上用prop规定该子项的验证规则名称)
// 在data中新增表单验证规则,这样表单在输入时就会做简单的判断和提示

// 表单重置功能
// 为表单添加引用项REF
// 为重置按钮添加点击函数,点击函数在method中定义,通过this.$refs.引用项名称可以获得该表单,调用resetFields方法会使得表单回复最初状态

// 登录验证功能
// 发送到后台之前必须判断，是否所有表单满足规则，否则无法提交，这就是表单预验证
// 引用该表单的validate（验证）功能，如果表单内所有输入框都满足则返回true，否则false
// 调用后端的验证接口，将data中的表单信息发送到后台
// 如果返回状态码不是200则说明验证失败了
// 如果返回的状态码是200则说明验证通过，返回的res.meta.token中存在token数据
// 利用window.sessionstorage.setItem将token数据进行本地存储
// 并且通过编程式导航跳转到/home路径

// 在index.js中添加路由守卫
// 到达路径是登录页面时，直接放行
// 到达的路径是其他的时候，需要利用window.sessionstorage.getItem获取一下token值
// 如果token没有数值，则跳转到登录页面，有数值的话直接放行